<template>
	<view>
		<u--form errorType="toast" :model="form" ref="myForm" :rules="rules" labelWidth="80">
			<u-form-item label="头像" borderBottom>
				<div class="flex flex justify-end">
					<view>
						<u-upload :fileList="fileList" :maxCount="1" maxSize="204800" @delete="deletePic" @afterRead="afterRead" />
					</view>
				</div>
			</u-form-item>
			<u-form-item label="用户名" prop="nickName" borderBottom>
				<u-input v-model="form.nickName" border="none" placeholder="请输入内容" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="sex" borderBottom @click="showSex=true">
				<view class="text-align-right">{{form.sex===1?'男':'女'}}</view>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="手机号" prop="phone" borderBottom>
				<u-input v-model="form.phone" border="none" type="number" placeholder="请输入内容" inputAlign="right">
				</u-input>
			</u-form-item>
			<u-form-item label="真实姓名" prop="trueName" borderBottom>
				<u-input v-model="form.trueName" border="none" placeholder="请输入内容" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="身份证号码" prop="idCard" borderBottom>
				<u-input v-model="form.idCard" border="none" placeholder="请输入内容" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="邮箱" prop="email" borderBottom>
				<u-input v-model="form.email" border="none" placeholder="请输入内容" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="个人简介" prop="introduction" borderBottom>
				<u--textarea v-model="form.introduction" :disableDefaultPadding="true" placeholder="请输入内容" border="none"></u--textarea>
			</u-form-item>
		</u--form>
		<view class="padding-30">
			<u-button color="#e54d42" size="large" text="保存" @click="submit" />
		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	export default {
		data() {
			return {
				showSex: false,
				actions: [
					{ name: '男', value: 1 },
					{ name: '女', value: 2 },
					{ name: '未知', value: 3 },
				],
				form: {
					avatar: '',
					nickName: '',
					phone: ''
				},
				fileList: [],
				rules: {
					nickName: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['setUserInfo']),
			// 删除头像
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.form.avatar = ''
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$reqUpLoad(lists[i].url)
					let item = this.fileList[fileListLen]
					this.form.avatar = result.fileUrl
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fileUrl
					}))
					fileListLen++
				}
			},
			sexSelect(e) {
				this.form.sex = e.value
			},
			getUserInfo() {
				this.$reqPost('GetEditUserInfo').then(res => {
					this.form = {
						avatar: res.data.avatar,
						email: res.data.email,
						idCard: res.data.idCard,
						introduction: res.data.introduction,
						nickName: res.data.nickName,
						phone: res.data.phone,
						sex: res.data.sex,
						trueName: res.data.trueName
					}
					this.fileList = [{
						url: res.data.avatar
					}]
				})
			},
			submit() {
				let that = this
				this.$refs.myForm.validate().then(res => {
					that.$reqJsonPost('EditLoginUserInfo', that.form).then(res => {
						that.$refs.uToast.show({
							message: res.msg,
							complete() {
								that.setUserInfo({...that.userInfo,userName:that.form.nickName})
								uni.navigateBack()
							}
						})
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>
